<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

// 最初にやること
function startup() {
	setInterval(doupdate, 3000);
}

// 定期的にやること
function doupdate() {
	/////////////////////////
	// 1.グローバル(つまりwindowオブジェクトに保管)に確保した配列にデータを保管する
	/////////////////////////
	// すでに表示しているmarkerを消す
	if( markerArr != undefined ) {
		for( var i = 0; i < markerArr.length; i++ ) {
			if( markerArr[i] != undefined && markerArr[i].marker != undefined ) {
				markerArr[i].marker.setMap(null);
			}
		}
	}

	// evalして配列オブジェクトにする
	markerArr = eval(v_responseText);

	// markerを生成してmarkerArrに保管する
	for( var i = 0; i < markerArr.length; i++ ) {
		var lat = markerArr[i].lat + window.seeds;
		var lon = markerArr[i].lon;
		var myLatlng = new google.maps.LatLng(lat, lon);
		// 座標を覚えておく
		markerArr[i].latlon = myLatlng;

		// markerを作る
		// 作ったmarkerを覚えておく
		markerArr[i].marker = createMarker(map, myLatlng, i);
	}

	/////////////////////////
	// 2.マーカー(地図)を移動させる
	/////////////////////////
	mapCenter(targetIdx);

	/////////////////////////
	// 3.マーカー一覧を更新
	/////////////////////////
	var bdy = document.getElementById("markerTableBody");
	var rows = "";
	for( var i = 0; i < markerArr.length; i++ ) {
		rows += "<tr>";
		rows += "<td><a href=javascript:void(0); onclick=setTargetMarkerIndex(" + i + ");>" + int2letter(i) + "</a></td>";
		rows += "<td>" + markerArr[i].name + "</td>";
		rows += "</tr>";
	}
	bdy.innerHTML = rows;

	// テスト用
	window.seeds += seedsFirst;
//alert(seeds);

}

// markerを生成する
function createMarker(map, latlon, index) {
	// indexをalphabetにする
	var letter = int2letter(index);
	var marker = new google.maps.Marker({
        	position: latlon, 
        	map: map,
        	title:"marker" + letter,
			icon : "http://www.google.com/mapfiles/marker" + letter + ".png"
	});
	return(marker);
}


// 数値からalphabetへ変換
function int2letter(val) {
	var letter = String.fromCharCode("A".charCodeAt(0) + val);
	return(letter);
}


// 地図の中心ターゲットマーカーindexを設定
window.targetIdx = 0;
function setTargetMarkerIndex(num) {
	window.targetIdx = num;
	//var location = markerArr[targetIdx].latlon;
	//map.panTo(location);
	mapCenter(targetIdx);
}

// 地図の中心を設定
function mapCenter(index) {
	var location = markerArr[index].latlon;
	map.panTo(location);
}


// 初期値設定
window.markerArr = new Array(50);


window.seedsFirst = 0.01;
window.seeds = seedsFirst;

// テスト用データ
var v_responseText = "[" + 
	'{"name":"taro", "lat":36.53, "lon":140.22},' + 
	'{"name":"jiro", "lat":36.54, "lon":140.23},' + 
	"]";

// テスト
if( false ) {
	// evalして配列オブジェクトにする
	markerArr = eval(v_responseText);

	// 検査
	for(var i = 0; i < markerArr.length; i++ ) {
		alert(markerArr[i].name + ", " + markerArr[i].lat, + ", " + markerArr[i].lon);
	}
}

</script>
</head>
<body onload="initialize();startup();">
<h1>test</h1>
<div id="map_canvas" style="width:800px; height:400px"></div>
<div id="markerTableParent" style="width:800px; height:200px">
<table border=2>
<thead>
	<tr bgcolor="#cccccc"><th>Marker</th><th>Name</th></tr>
</thead>
<tbody id=markerTableBody>
	<!-- <tr><td>Marker</td><td>Name</td></tr> -->
</tbody>
</div>


</body>
</html>
